(function() {
    let shopId = 0
    let areaId = 0
    let flag = false
        //先渲染一遍页面

    info()

    //先设一个定时器，进行异步操作
    setTimeout(() => {
        $(' .shop').click(function(e) {
            $('.fx_a').text('▲')
            e.preventDefault();
            $.ajax({
                type: "get",
                url: "http://chst.vip:1234/api/getgsshop",
                data: '',
                async: false,
                dataType: "json",
                success: function(response) {
                    // console.log(response);
                    let html = ''
                    let { result: data } = response
                    data.forEach(item => {
                        html += `
                        <li data-shopid=${item.shopId}>${item.shopName}</li>
                        `
                    })
                    $('.infoB').html(html)
                    if (flag) {
                        flag = false
                        $('.infoB').slideToggle(200);
                    }
                    // $('.infoB').on('click', 'li', function() {
                    //     // console.log($(this).attr('data-shopid'));
                    //     shopId = $(this).attr('data-shopid')
                    //     info()
                    // })
                }

            });
        });



        $('.place').click(function() {
            $('.fx_b').text('▲')
            $.ajax({
                type: "get",
                url: "http://chst.vip:1234/api/getgsshoparea",
                data: '',
                dataType: "json",
                success: function(response) {
                    // console.log(response);
                    let html = ''
                    let { result: data } = response
                    data.forEach(item => {
                        html += `
                        <li data-areaid=${item.areaId}>${item.areaName}</li>
                        `
                    })
                    $('.infoB').html(html)
                    if (flag) {
                        flag = false
                        $('.infoB').slideToggle(200);
                    }
                    // $('.infoB').on('click', 'li', function() {
                    //     areaId = $(this).attr('data-areaid')
                    //     info()
                    // })
                }
            });
        })
    }, 0)

    $('.infoB').on('click', 'li', function() {

        flag = true
            // console.log($(this).attr('data-shopid'));
        if ($(this).attr('data-shopid') == undefined) {
            areaId1 = $(this).attr('data-areaid')
            areaId = areaId1
            console.log($(this).text().split("（"));
            let html1 = $(this).text().split("（")[0]
            $('.dif_b').html(html1).next().text('▼')
        } else {
            shopId1 = $(this).attr('data-shopid')
            shopId = shopId1
            let html1 = $(this).text()
            $('.dif_a').html(html1).next().text('▼')
        }
        info()
        $(this).parent().slideToggle();
    })



    function info() {
        $.ajax({
            type: "get",
            url: "http://chst.vip:1234/api/getgsproduct",
            data: {
                shopid: shopId,
                areaid: areaId,
            },
            dataType: "json",
            success: function(response) {
                // console.log(response);
                //productImg: "http://img10.360buyimg.com/n7/jfs/t577/85/103283769/55548/3ecfcbf8/5461b6e1N70e46439.jpg"
                // productName: "廿一客(21cake)专用餐具 1人份(不单独配送)"
                // productPrice: "¥0.50"
                let html = ''
                let { result: data } = response
                data.forEach(item => {
                    html += `
                            <li>
                                <a href="#">
                                    <img src="${item.productImg}" alt="">
                                    <p>${item.productName}</p>
                                    <span>${item.productPrice}</span>
                                </a>
                            </li>
                        `
                })
                $('.info').html(html)
            }
        });
    }
})()